<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>lable</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="sas">
<p>当前a:{{a}}</p>
<!--  只允许单击一次，事件只有一次会生效-->
  <p v-on:click.once="seta(1)">设置为一</p>
  <p v-on:click="seta(2)">设置为二</p>


  <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
  <button @click.ctrl="aClick()" >a</button>

  <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  <button @click.ctrl.exact="bClick()">b</button>

  <!-- 没有任何系统修饰符被按下的时候才触发 -->
  <button @click.exact="cClick()">c</button>

</div>
<script>
  var cc=new Vue({
    el:"#sas",
    data:{
      a: 20
    },
    methods:{
      seta(a){
        this.a=a;
      },
      aClick(){
        this.a=a;
      },
      bClick(){
        this.a=b;
      },
      cClick(){
        this.a=c
      }

    }
  })
</script>
</body>
</html>